<script setup>
  import { ref, onMounted } from 'vue'
  import { loginApi, platformApi, sendSmsCaptchaApi } from '@/apis/login'
  import { useStore } from 'vuex'

  const store = useStore()

  //获取表单组件
  const fromDateRef = ref(null)
  // 表单变量
  const formData = ref({
    // 手机号 15800000000
    mobile: '15800001109',
    // 短信验证码 246810
    smsCode: '',
    partyData: ''
  })
  // 校验规则
  const rules = {
    mobile: {
      rules: [
        {
          required: true,
          errorMessage: '手机号不能为空'
        },
        {
          pattern: '^(?:(?:\\+|00)86)?1[3-9]\\d{9}$',
          errorMessage: '请输入正确的手机号'
        }
      ]
    },
    partyData: {
      rules: [
        {
          required: true,
          errorMessage: '图形验证码不能为空'
        }
      ]
    },
    smsCode: {
      rules: [
        {
          required: true,
          errorMessage: '验证码不能为空'
        }
      ]
    }
  }
  // 校验自定义
  const rulesArr = ref(['mobile', 'partyData'])
  // 图形码
  const chaCodeImg = ref('')
  // 图形验证码key
  const captchaKey = ref('')
  // 点击不同的按钮判断类型
  const type = ref('')

  onMounted(() => {
    getImageCode()
  })

  // 获取图形验证码
  async function getImageCode() {
    const { data } = await platformApi()
    // console.log(data)
    chaCodeImg.value = data.base64
    captchaKey.value = data.key
  }
  // 点击重新获取图形验证码
  function onCaptcha() {
    getImageCode()
  }
  // 表单校验
  function rulesFromDate() {
    // console.log(fromDateRef)
    fromDateRef.value
      .validateField(rulesArr.value)
      .then((res) => {
        if (type.value === 'login') {
          login()
        } else {
          getCode()
        }
        console.log('表单数据信息：', res)
      })
      .catch((err) => {
        console.log('表单错误信息：', err)
      })
  }
  // 点击获取验证码
  function onCode() {
    type.value = 'code'
    rulesArr.value = ['mobile', 'partyData']
    rulesFromDate()
  }
  // 点击登录
  function onSubmitForm() {
    rulesArr.value.push('smsCode')
    type.value = 'login'
    rulesFromDate()
  }
  // 封装 获取验证码方法
  async function getCode() {
    const form = {
      captchaCode: formData.value.partyData,
      captchaKey: captchaKey.value,
      mobile: formData.value.mobile
    }
    const res = await sendSmsCaptchaApi({ form })
    if (res.status !== 200) {
      return uni.utils.toast(res.message)
      getImageCode()
    }
    formData.value.smsCode = 246810
    uni.utils.toast(res.message)
  }
  // 封装登陆方法
  async function login() {
    const fromData = {
      mobile: formData.value.mobile,
      smsCode: formData.value.smsCode
    }
    const { data, message, status } = await loginApi(fromData)
    if (status !== 200) {
      uni.utils.toast(message)
      getImageCode()
    }
    console.log(store)
    console.log(data)
    store.commit('user/setToken', data)

    uni.switchTab({
      url: '/pages/index/index'
    })
  }
</script>
<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>手机号登录</text>
      </view>
      <view class="sub-title">
        <text>未注册的手机号登录后将自动注册</text>
      </view>
    </view>

    <!-- 表单 -->
    <view class="formData">
      <uni-forms
        ref="fromDateRef"
        :rules="rules"
        :modelValue="formData"
        err-show-type="toast"
      >
        <uni-forms-item class="form-item" name="mobile">
          <uni-easyinput
            :clearable="false"
            class="form-item--input"
            v-model="formData.mobile"
            placeholder="请输入手机"
          />
        </uni-forms-item>
        <uni-forms-item class="form-item" name="partyData">
          <uni-easyinput
            :clearable="false"
            class="form-item--input"
            v-model="formData.partyData"
            placeholder="请输入图形验证码"
          />
          <view class="captcha" @click="onCaptcha">
            <image class="plat-Img" :src="chaCodeImg" mode=""></image>
          </view>
        </uni-forms-item>
        <uni-forms-item class="form-item" name="smsCode">
          <uni-easyinput
            :clearable="false"
            class="form-item--input"
            v-model="formData.smsCode"
            placeholder="请输入验证码"
          />
          <view class="form-item--parts" @click="onCode">
            <view class="captcha-sms">
              <text class="activate">获取验证码</text>
            </view>
          </view>
        </uni-forms-item>
      </uni-forms>
      <button class="login-button" @click="onSubmitForm">登录</button>
    </view>
  </view>
</template>

<style lang="scss">
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }
  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  ::v-deep .uni-forms-item__content {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    .is-input-border {
      border: 0;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
      border: none;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }

    // 图形验证码
    .captcha {
      height: 100%;

      .plat-Img {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }

    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: #cea26a;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }

  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
